<template>
  <el-dialog title="发送公告" :lock-scroll="false" :visible.sync="visible" customClass="live-send-announcement-view">
    <div class="chooseBox">
      <span>发布至：</span>
      <el-checkbox-group v-model="checkList" @change="changecheck(checkList)">
        <el-checkbox label="1">直播间</el-checkbox>
        <el-checkbox label="2">观点公告</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="send-announcement-dialog">
      <textarea class="" name="" id="" cols="30" v-model="send_announcement_text" rows="10"></textarea>
      <div class="s-an-d-footer-btn">
        <button class="s-an-cancel" type="button" @click="send_announcement_cancel">取消</button>
        <button class="s-an-f" @click="send_announcement_post" type="button">发送</button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'recharge-vip',
    data () {
      return {
        visible: false,
        send_announcement_text: '',
        checkList: ['1'],
        postCheckList: '1'
      }
    },
    props: {
      visitor_id: {
        default: false,
      },
    },
    methods: {
      changecheck(checkList) {
        this.postCheckList = checkList.toString()
      },
      send_announcement_cancel () {
        this.visible = false
      },
      send_announcement_post () {
        let params = {
          visitor_id: this.visitor_id,
          content: this.send_announcement_text,
          chat_status: 2,
          notice_target: this.postCheckList
        }
        this.$http.post('/index/beta_api/sendChat', params).then((res) => {
          this.send_announcement_text = ''
          this.visible = false
          if (Number(res.code) === 3) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  /*公告弹窗*/
  .live-send-announcement-view {
    width: 500px;
    border-radius: 10px;
    .el-dialog__header {
      text-align: left;
      border-bottom: solid 1px #dddddd;
      padding-top: 0px;
      height: 50px;
      line-height: 50px;
      .el-dialog__headerbtn {
        top: 12px!important;
        right: 14px!important;
      }
    }
    .el-dialog__body {
      padding: 12px 16px 15px;
    }
    .chooseBox {
      margin-bottom: 12px;
      span {
        font-size: 12px;
        color: #555555;
      }
      .el-checkbox-group {
        display: inline-block;
        .el-checkbox__inner {
          width: 15px;
          height: 15px;
          -webkit-transform: translateY(1px);
          -moz-transform: translateY(1px);
          -ms-transform: translateY(1px);
          -o-transform: translateY(1px);
          transform: translateY(1px);
          &:after {
            height: 7px;
            left: 4px;
            top: 1px;
            width: 3px;
          }
        }
      }
    }
    .send-announcement-dialog {
      > textarea {
        width: 100%;
        height: 150px;
        display: block;
        background-color: #f2f3f6;
        border-radius: 3px;
        border: solid 1px #e6e6e6;
        padding: 8px;
      }
      .s-an-d-footer-btn {
        text-align: right;
        margin-top: 15px;
        .s-an-cancel {
          width: 105px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin-right: 10px;
          border-radius: 3px;
          border: solid 1px #dddddd;
          background: #ffffff;
          &:hover {
            border: solid 1px #d9d9d9;
          }
        }
        .s-an-f {
          width: 105px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: solid 1px #3c92e8;
          background-color: #3c92e8;
          border-radius: 3px;
          color: #ffffff;
        }
      }
    }
  }
</style>
